<script setup>
import { reactive, computed, onMounted, onBeforeUnmount, watch } from 'vue'
import { useStore } from 'vuex'
import empty from '@/assets/img/empty.png'
const store = useStore()
const api = store.state.api
const common = store.state.common.obj
const isAnchor = store.state.isAnchor
const props = defineProps({
    tabIndex: Number
})
let tabIndex = props.tabIndex
watch(() => props.tabIndex, (newVal) => {
    tabIndex = newVal
    getInfo()
})
let anchorInfo = reactive({
    result: {}
})
const getInfo = async () => {
    await api.leg2giftAnchorInfo({ calendarId: tabIndex, anchorId: isAnchor ? common.userId : common.anchorId }).then(res => {
        if (res.data.result) anchorInfo.result = res.data.result
        else anchorInfo.result = {}
    })
}
const info = computed(() => {
    return anchorInfo.result
})
let timer
onMounted(() => {
    getInfo()
    timer = setInterval(() => {
        getInfo()
    }, 30 * 1000);
})
onBeforeUnmount(() => {
    clearInterval(timer)
})
</script>

<template>
    <div class="rankAward">
        <p class="awardRule">
            根据主播今天收到的联赛票数量，可获得对应奖励
        </p>
        <div class="awardImg">
            <div>
                <p><img src="../../../assets/img/ceremony/rankTickets.png" alt=""></p>
                <p>每收到<span>{{ info.limitTicket }}</span>个联赛票</p>
            </div>
            <div>奖励</div>
            <div>
                <p><img v-if="info.baseGoodsId" :src="'https://down.qxiu.com/pic/' + info.baseGoodsId + '_9.png'" alt="">
                </p>
                <p>{{ info.goodsName }}*1</p>
            </div>
        </div>
        <ul class="awardInfo">
            <li>
                <p>主播昵称</p>
                <p>ID</p>
                <p>收到联赛票</p>
                <p>奖励</p>
            </li>
            <li>
                <p class="name">{{ info.anchorName }}</p>
                <p>{{ info.anchorId }}</p>
                <p>{{ info.totalTicket }}</p>
                <p>{{ info.goodsName + '*' + info.haveGotGiftNum }}</p>
            </li>
        </ul>
    </div>
</template>

<style lang='scss' scoped></style>